<!doctype html>
<html lang="zh-CN">

<head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" type="text/css" href="asserts/dist/css/layui.css">
    <script type="text/JavaScript" src="asserts/dist/layui.js" charset="utf-8"></script>
    <script src="asserts/js/jquery-2.1.1.min.js"></script>
    <link href="asscerts/bootstrap-3.4.1-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="asscerts/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <title>订单详情</title>

<style>
    .navbar-inverse{
        height: 35px;
        font-size: 6px;
    }
    #a2{
        padding-top: 7px;
        margin-top: 0px;
        padding-right:0px;
        color: #eb9e9b
    }
    #a2:hover{
        color: #eb565f;
    }
    #div1{
        /*border: red solid 1px;*/
        height: 80px;
        width: 910px;
        margin-left: 192px;
        margin-top: 10px;
    }
    #div2{
        overflow: hidden;
        /*border: red solid 1px;*/
        float: left;
        height: 80px;
        width: 150px
    }
    #div3{
        /*border: red solid 1px;*/
        float: left;
        margin-left: 20px;
        font-size: 18px;
        height: 80px;
        width: 350px;
        font-weight:500;
        color: #4a4a4a;
        padding-top: 25px;
        font-family:微软雅黑;
    }
    .span1{
        /* 鼠标移入变小手 */
        cursor: pointer;

    }
    .span1:hover{
        font-weight: bold;
    }
    .form-group{
        /*border: red solid 1px;*/
        height: 80px;
        width: 300px;
        padding-top: 22px;
        float: right;
        color: #FFFFFF;

    }
    #button_id{
        float: right;
        width: 70px;
        height: 34px;
        background-color: #ff6e39;
        border: 0px;
        border-radius: 4px;
        box-shadow: 0px 0px 5px #888888;
    }
    /*表格图片样式*/
    .layui-table-cell{
        text-align:center;
        height:auto;
        white-space:normal;
    }
</style>
</head>

<body>
<nav class=" navbar-inverse">
    <div class="container-fluid" >
        <!-- Brand and toggle get grouped for better mobile display -->
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class=""><a href="#" style="padding-top: 0px;margin-top: 7px;margin-left: 150px">淘贝首页</a></li>
                <li><a href="#" style="padding-top: 0px;margin-top: 7px">问题反馈</a></li>
                <li><a href="#" style="padding-top: 0px;margin-top: 7px">卖家中心</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"   style="padding-top: 7px;margin-top: 0px;height: 35px;">商品分类 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">数码电子</a></li>
                        <li><a href="#">食品</a></li>
                        <li><a href="#">生活用品</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">服装 | 男装 | 女装</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">厨具用品</a></li>
                    </ul>
                </li>
            </ul>
            <!--  <form class="navbar-form navbar-left">
                  <div class="form-group">
                      <input type="text" class="form-control" placeholder="Search">
                  </div>
                  <button type="submit" class="btn btn-default">Submit</button>
              </form>-->
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#"  id="a2">亲，请登录</a></li>
                <li><a href="#" style="padding-top: 7px;margin-top: 0px;">注册</a></li>
                <li><a href="#"  style="padding-top: 7px;margin-top: 0px;height: 35px;margin-right: 150px">购物车<span style="color: #eb9e9b">0</span></a>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

<form class="layui-form" action="">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label" style="padding-left: 2px">订单编号</label>
            <div class="layui-input-inline" style="width: 400px">
                <input type="text" id="orderNumber" name="orderNumber" lay-verify="orderNumber" disabled autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label"style="padding-left: 2px">订单状态</label>
            <div class="layui-input-inline">
                <input type="text" id="status" name="status" lay-verify="status" disabled autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label"style="padding-left: 2px">收货人</label>
            <div class="layui-input-inline">
                <input type="text" name="recipient" id="recipient"lay-reqtext="收货人是必填项，岂能为空？" lay-verify="recipient" disabled autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label"style="padding-left: 2px">联系电话</label>
            <div class="layui-input-inline">
                <input type="tel" name="phone" id="phone" lay-verify="required|phone" disabled autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label"style="padding-left: 2px">收货地址</label>
            <div class="layui-input-inline">
                <input type="text" name="date" id="ad" disabled  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label"style="padding-left: 2px">创建时间</label>
            <div class="layui-input-inline">
                <input type="tel" name="date" id="date" disabled  autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
        <label class="layui-form-label"style="padding-left: 2px">更改地址</label>
        <div class="layui-input-block">
            <button class="layui-btn address">
                选择收货地址
                <i class="layui-icon layui-icon-down layui-font-12"></i>
            </button>
        </div>
        </div>
        <div class="layui-inline">
           <button id="addAddress" type="button" class="layui-btn layui-btn-primary layui-btn-sm">添加新地址</button>
        </div>

    </div>
    <div class="layui-form-item">
        <table class="layui-hide" id="test" lay-filter="test"></table>
    </div>

    <script type="text/html" id="imgtmp">
        <img src="{{d.url}}"style="width: 100px;height: 100px"/>
    </script>
<script>
    function getQueryVariable(variable){
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){return pair[1];}
        }
        return(false);
    }

</script>
    <script>
        function OrderStatus(status) {
            if(status == 1){
                status = "超时关闭"
            }else if(status == 2){
                status = "待支付"
            }else if(status == 3){
                status = "已支付未发货"
            }else if(status == 4){
                status = "待收货"
            }else if(status == 5){
                status = "待评价"
            }else if(status == 6){
                status = "订单完成"
            }
            return status;
        }
    </script>
        <script>
            var total = 0;
            var addresslist = [];
            var discountlist = [];
            //获取地址
            $(function() {
                    $.ajax({
                        url: "address/getAllAddr",
                        type: "GET",
                        dataType: "json",
                        success: function(res) {
                            console.log(res)
                            if (res.status == 200){
                                for (let i = 0; i < res.data.length; i++) {
                                    addresslist.push({
                                        title:res.data[i].address,
                                        name:res.data[i].name,
                                        tel:res.data[i].tel
                                    });
                                }
                            }
                        }
                    });
                },)
            //获取优惠券
            $(function() {
                $.ajax({
                    url: "disc/getAvailableDis",
                    data:{
                        id:4
                    },
                    type: "GET",
                    dataType: "json",
                    success: function(res) {
                        console.log(res)
                        if (res.status == 200){
                            for (let i = 0; i < res.data.length; i++) {
                                discountlist.push({
                                    title:res.data[i].name,
                                    discountId:res.data[i].id,
                                    prePrice:res.data[i].prePrice
                                });
                            }
                        }
                    }
                });
            },)
            console.log(addresslist)
            layui.use(['dropdown', 'util', 'layer', 'table','rate'], function(){
                var orderId = null;
                var rate = layui.rate;
                var table = layui.table;
                var util = layui.util;
                var layer = layui.layer //弹层
                ,$ = layui.jquery
                $('#addAddress').on("click",function(){
                    parent.layer.open({
                        //调整弹框的大小
                        area:['520px','300px'],
                        shadeClose:true,//点击旁边地方自动关闭
                        //动画
                        anim:2,
                        //弹出层的基本类型
                        type: 2,
                        //刚才定义的弹窗页面
                         content: 'alertOrderaddress.html', //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                        // content: $("#aa"),
                        btn: ['确定','取消'],
                        //这里yes:function为设置的第一个按钮的function，后面设置的按钮默认点击关闭
                        yes:function(index,layero){
                            //需要回显的值
                            //layero为当前的DOM对象，去找打开的iframe转成DOM对象调用子页面其中的function (callbackdata)
                            var res = $(layero).find("iframe")[0].contentWindow;
                            var newAddress = res.$('#newAddress').val()
                            var newName = res.$('#newName').val()
                            var newPhone = res.$('#newPhone').val()
                            $.ajax({
                                url: "address/addAddr",
                                type: "POST",
                                data:{
                                    address:newAddress,
                                    tel:newPhone,
                                    name:newName
                                },
                                dataType: "json",
                                success: function(res) {
                                    //把回显的值赋给需要显示的地方
                                    if(newAddress == ''){
                                        layer.msg('地址不能为空');
                                    }else if(newPhone== ''){
                                        layer.msg('电话不能为空');
                                    }else if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(newPhone))) {
                                        layer.msg('手机号格式错误');
                                    }else if(newName == '') {
                                        layer.msg('姓名不能为空');
                                    }else{
                                        $("#recipient").attr("value",newName);
                                        $("#ad").attr("value",newAddress);
                                        $("#phone").attr("value",newPhone);
                                        //关闭子页面
                                        parent.layer.close(index);
                                    }
                                },
                                error:function (res){
                                    layer.msg('保存地址失败');
                                }
                            });

                        },
                        // end: function(){
                        //     if($('#newAddress').val() == ''){
                        //         layer.msg('地址不能为空');
                        //     }else if($('#newPhone').val()== ''){
                        //         layer.msg('电话不能为空');
                        //     }else if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test($('#newPhone').val()))) {
                        //         layer.msg('手机号格式错误');
                        //     }else if($('#newName').val()== '') {
                        //         layer.msg('姓名不能为空');
                        //     }else{
                        //     if(getQueryVariable("newName")== ''&&getQueryVariable("newAddress")== '' &&getQueryVariable("newPhone")== ''){
                        //         $("#recipient").attr("value",'请填写收货人');
                        //         $("#ad").attr("value",'请填写地址');
                        //         $("#phone").attr("value",'请填写手机');
                        //     }
                        // }}
                    });

                });
                //只读
                rate.render({
                    elem: '#productStar'
                    ,value: 4
                    ,readonly: true
                });
                var dropdown = layui.dropdown
                //选择地址
                dropdown.render({
                    elem: '.address'
                    ,data: addresslist
                    ,click: function(obj){
                        $("#recipient").attr("value",obj.name);//收货人
                        $("#phone").attr("value",obj.tel);//手机
                        $("#ad").attr("value",obj.title);//
                        layer.tips('选择了：'+ obj.title, this.elem, {tips: [1, '#5FB878']})
                    }
                });
                //选择优惠券
                dropdown.render({
                    elem: '.discount'
                    ,data: discountlist
                    ,click: function(obj){
                        console.log(obj)
                        // $("#recipient").attr("value",obj.name);//收货人
                        // $("#phone").attr("value",obj.tel);//手机
                        // $("#ad").attr("value",obj.title);//
                        layer.tips('选择了：'+ obj.title, this.elem, {tips: [1, '#5FB878']})
                        document.getElementById('total').innerHTML = (total-obj.prePrice)+"元";

                    }
                });
                table.render({
                    elem: '#test'
                    ,url:'order/selectOrderDetailsByOrderId'
                    ,where:{
                        orderId:getQueryVariable("id")
                    }
                    ,parseData: function(res){ //res 即为原始返回的数据
                        return {
                            "code":0, //解析接口状态
                            "msg": res.msg, //解析提示文本
                            "count": res.data.length, //解析数据长度
                            "data": res.data//解析数据列表
                        };
                    }
                    ,title: '用户数据表'
                    ,limit:10//每页显示的条数（默认 10）。值需对应 limits 参数的选项。注意：优先级低于 page 参数中的 limit 参数
                    ,limits:[10,20,30,40,50]
                    ,id: 'productTable'
                    ,statusCode:200//成功的状态码，默认：0
                    ,cols: [[
                        {field:'name', title:'商品名称',width:100, align: "center",style: "height:110px;", fixed: 'left'}
                        ,{field:'url', title:'商品图片',width:200, align: "center",style: "height:110px;", templet: "#imgtmp"}
                        ,{field:'price', title:'商品价格',width:100, align: "center"}
                        ,{field:'context', title:'商品介绍', align: "center"}
                        ,{field:'storeName', title:'所属店铺',width:150, align: "center"}
                        ,{field:'sale', title:'商品销量',width:100,align: "center"}
                        ,{field:'star', title:'商品评分', width:250,align: "center",id:'rate',
                                templet: function (d) {
                            //在设置星级的列中用templet函数转义，其中d.id代表该行的id值.第一行的评分的id=start1，第二行的评分的id=star2.....用在后面循环赋值。很重要！
                                    return '<div id="star'+d.star+'" style="font-size: 13px;"></div>'
                                }
                            ,}
                        ,{field:'number', title:'数量',width:80, align: "center"}
                    ]]
                    ,page: true
                    ,//如果是异步请求数据方式. res即为你接口返回的信息。
                    done:function (res,curr,count) {
                        console.log(res.data)
                        var data = res.data;//返回的json中data数据
                        table_data = data;//全局变量，用在后面排序，与这个循环无关。
                        for (var item in data) {
                            total=(data[item].price * data[item].number)+total;
                            //星级
                            rate.render({//循环设置评分
                                elem: '#star'+data[item].star+''//给不同的id的rate绑定不同的值
                                , length: 5            //星星个数
                                , value: data[item].star        //初始化值
                                , half: true           //支持半颗星
                                , text: false           //显示文本，默认显示 '3.5星'
                                , readonly: true      //只读
                            });

                        };
                        var status = OrderStatus(res.data[0].status);
                        var time = dateFormat(res.data[0].createTime)
                        $("#orderNumber").attr("value",res.data[0].orderNumber);//编号
                        $("#status").attr("value",status);//状态
                        $("#recipient").attr("value",res.data[0].recipient);//收货人
                        $("#phone").attr("value",res.data[0].tel);//手机
                        $("#date").attr("value",time);//时间
                        $("#ad").attr("value",res.data[0].address);//地址
                        $("#remark").attr("placeholder",res.data[0].remark);//备注
                        // $("#total").attr("value",total);//合计
                        document.getElementById('total').innerHTML = total+"元";
                        // window.location.href="userOrderDetails.html?id="+obj.data.id
                        orderId = res.data[0].id;
                    }
                }
                );
                //立即支付
                $('#pay').on("click",function(){
                    var phone= document.getElementById("phone");
                    var name= document.getElementById("recipient");
                    var address= document.getElementById("ad");
                    if(phone == '' && phone == null){
                        layer.msg('电话不能为空，请选择收货地址');
                    }else if(name == '' && name == null){
                        layer.msg('收货人名字不能为空，请选择收货地址');
                    }else if(address == '' && address == null){
                        layer.msg('地址不能为空，请选择收货地址');
                    }else {
                        window.location.href="userOrderDetails.html?id="+orderId
                    }
                });
                //不使用优惠券
                $('#notyh').on("click",function(){
                    document.getElementById('total').innerHTML = total+"元";
                });
            });
        </script>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label"style="padding-left: 2px">订单备注</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入您的备注" id="remark" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">优惠券</label>
            <div class="layui-input-block">
                <button class="layui-btn discount">
                    选择优惠券
                    <i class="layui-icon layui-icon-down layui-font-12"></i>
                </button>
            </div>
        </div>
        <div class="layui-inline" style="width: 300px">
            <label class="layui-form-label"style="font-size: 20px;color: #FF0000;text-align: right;width: 80px">合计:</label>
            <label id="total" class="layui-form-label"style="font-size: 40px;color: #FF0000;text-align:left;float: left;width: 200px"></label>
        </div>
        <div class="layui-inline" style="width: 500px">
            <button id="notyh" type="button" class="layui-btn layui-btn-warm" >不使用优惠券</button>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
        <div class="layui-input-block">
            <button id="pay" type="button" class="layui-btn layui-btn-warm" >重新下单</button>
            <a href="userOrder.html"><button type="button" class="layui-btn layui-btn-primary">返回订单列表</button></a>
        </div>
        </div>
    </div>
</form>


</body>

</html>